<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter();
const list = ref([
  {
    title: '出售价格',
    value: '￥150.00'
  },
  {
    title: '进货价格',
    value: '￥88.00'
  }
]);
const showNum = ref(false)
const numList = ref([
  {
    title: '总计数量',
    value: '总计600台'
  },
  {
    title: '总部仓库',
    value: '400台'
  },
  {
    title: '槐安一仓',
    value: '100台'
  },
  {
    title: '哈哈仓库',
    value: '100台'
  }
])
const StockFn = () => {
  showNum.value = true
}
const ProductsFn = () => {
  router.push('/Details')
}
</script>

<template>
  <div class="p-[15px] w-[335px]">
    <div class="w-full flex items-center h-[80px]">
      <van-image
          width="60"
          height="60"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div class="ml-[10px] h-full w-[calc(100%-70px)] flex flex-col mt-[10px]">
        <div class="text-[12px] w-[90%] text-ellipsis whitespace-nowrap overflow-hidden">
          哈哈哈哈哈哈嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿和嘿嘿和和
        </div>
        <div class="mt-[10px] text-[12px] text-[#999] text-ellipsis whitespace-nowrap overflow-hidden">DYJ</div>
        <div class="elasticity mt-[15px]">
          <div class="text-[#666] text-[12px]">库存500台</div>
          <div class="flex items-center">
            <van-button @click="StockFn" icon="arrow" type="primary" icon-position="right" size="mini">库存详情</van-button>
            <van-button @click="ProductsFn" icon="arrow" type="primary" plain icon-position="right" size="mini">产品详情</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full marginTop">
      <van-cell-group inset>
        <van-cell v-for="(item, index) in list" :key="index" :title="item.title" :value="item.value" />
      </van-cell-group>
      <van-form>
        <van-cell-group inset>
          <van-field name="remark" label="备注"
                     placeholder="备注信息"
                     type="textarea"
                     autosize
                     show-word-limit
                     maxlength="200"></van-field>
        </van-cell-group>
      </van-form>
    </div>
    <div class="elasticity marginTop">
      <van-button icon="share-o" color="#FDC71C" size="small" :round="true" />
      <van-button color="#1ecd84" size="small" :round="true">出库</van-button>
      <van-button color="#235eff" size="small" :round="true">入库</van-button>
    </div>
  </div>
  <van-popup :round="true" v-model:show="showNum" :closeable="true">
    <div class="mt-[30px] w-[300px]">
      <div class="text-center font-bold text-[20px] w-full">库存数据</div>
      <van-cell-group inset>
        <van-cell v-for="(item,index) in numList" :key="index" :title="item.title" :value="item.value" />
      </van-cell-group>
    </div>
  </van-popup>
</template>

<style scoped lang="less">
::v-deep {
  .van-button--small:nth-of-type(n+2) {
    width: 120px;
  }
}
</style>